<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>测试 Cadillac Mini DBC</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .error { color: red; font-weight: bold; }
        .success { color: green; font-weight: bold; }
        .warning { color: orange; }
        pre { background: #f9f9f9; padding: 10px; border: 1px solid #ddd; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>测试 Cadillac Mini DBC 文件</h1>
    
    <button onclick="loadAndTest()">加载并测试 cadillac-mini.dbc</button>
    
    <div id="result"></div>

    <script src="dbc-parser.js"></script>
    <script>
        async function loadAndTest() {
            const resultDiv = document.getElementById('result');
            
            try {
                const response = await fetch('cadillac-mini.dbc');
                const content = await response.text();
                
                console.log('DBC文件内容:');
                console.log(content);
                
                // 解析
                const database = parseDBCContent(content, 'cadillac-mini.dbc');
                
                resultDiv.innerHTML = `
                    <div class="success">✓ 解析成功！</div>
                    <h3>解析结果：</h3>
                    <p><strong>版本：</strong> "${database.version}"</p>
                    <p><strong>节点数量：</strong> ${database.nodes.length}</p>
                    <p><strong>帧数量：</strong> ${database.frames.length}</p>
                    <p><strong>警告数量：</strong> ${database.warnings.length}</p>
                    
                    <h4>节点列表：</h4>
                    <p>${database.nodes.join(', ')}</p>
                    
                    <h4>帧列表：</h4>
                    ${database.frames.map(frame => `
                        <div style="margin: 5px 0; padding: 5px; background: #f5f5f5;">
                            <strong>${frame.name}</strong> (ID: 0x${frame.canId.toString(16).toUpperCase()}, DLC: ${frame.dlc})
                            <br>信号数量: ${frame.signals.length}
                        </div>
                    `).join('')}
                    
                    ${database.warnings.length > 0 ? `
                        <h4>警告信息：</h4>
                        ${database.warnings.map(w => `<div class="warning">行 ${w.line}: ${w.message}</div>`).join('')}
                    ` : ''}
                `;
            } catch (error) {
                console.error('测试失败:', error);
                resultDiv.innerHTML = `<div class="error">✗ 测试失败: ${error.message}</div>`;
            }
        }
        
        // 页面加载时自动运行测试
        window.onload = loadAndTest;
    </script>
</body>
</html> 